<template>
  <div class="login">
    <div class="login-head">
      注册
    </div>
    <div class="box">
      <div class="item">
        <p>手机号码</p>
        <input type="text" v-model="tel" @blur="telyz()" placeholder="请输入手机号" name="">
      </div>
      <div class="item">
        <p>登录密码</p>
        <input type="password" v-model="pass" placeholder="请输入登录密码" name="">
      </div>
      <div class="item">
        <p>重复密码</p>
        <input type="password" v-model="checkPass" placeholder="请输入登录密码" name="" @blur="passyz()">
      </div>
      <div class="item">
        <p>验证码</p>
        <input class="code" type="text" v-model="code" placeholder="请输入验证码" name="">
        <mt-button class="getcode" :disabled="disabled" type="default" @click="sendcode()">{{btntxt}}</mt-button>
      </div>
      <div class="loginbtn" @click="regg()">
        注册
      </div>
      <router-link class="goreg" to="/login">已有账号？去登录</router-link>
    </div>
  </div>
</template>

<script>
import qs from "qs"
export default {
  name: 'App',
  data(){
    return{
      tel:'',
      pass:'',
      checkPass:'',
      btntxt:'获取验证码',
      disabled: false,
      code:''
    }
  },
  methods:{
    telyz:function(){
      var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      if(this.tel==''){
        this.$toast('手机号不能为空');
      }else if(!reg.test(this.tel)){
        this.$toast('手机号格式不正确');
      }
    },
    passyz:function(){
      if(this.pass == ''){
        this.$toast('错了哦，密码不能为空');
      }else if(this.pass != this.checkPass){
        this.$toast('错了哦，输入密码不一致');
      }
    },
    sendcode:function(){
        var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
                //var url="/nptOfficialWebsite/apply/sendSms?mobile="+this.ruleForm.phone;
        if(this.tel==''){
          this.$toast('手机号不能为空');
        }else if(!reg.test(this.tel)){
          this.$toast('手机号格式不正确');
        }else if(this.pass == ''){
          this.$toast('登录密码不能为空');
        }else if(this.pass != this.checkPass){
          this.$toast('输入密码不一致');
        }else{
          
          this.$http.get("/index.php/index/Smsverify/ajaxSendTemplateSMS?mode=register&phone="+this.tel)
              .then(res => {
                console.log(res)
                this.time=60;
                this.disabled= true;
                this.timer();
                
              })
              .catch(error => {
                alert("网络错误")
              });
            
                    /*axios.post(url).then(
                        res=>{
                        this.phonedata=res.data;
                    })*/
        }
    },
    timer() {
        if (this.time > 0) {
              this.time--;
              this.btntxt=this.time+"s后重新获取";
              setTimeout(this.timer, 1000);
        } else{
              this.time=0;
              this.btntxt="获取验证码";
              this.disabled=false;
        }
    },

    regg:function(){
      var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      if(this.tel==''){
          this.$toast('手机号不能为空');
        }else if(!reg.test(this.tel)){
          this.$toast('手机号格式不正确');
        }else if(this.pass == ''){
          this.$toast('登录密码不能为空');
        }else if(this.pass != this.checkPass){
          this.$toast('输入密码不一致');
        }else if(this.code == ''){
          this.$toast('请输入验证码');
        }else{
          this.$http.post("/index.php/index/user/register",qs.stringify({
              mobile:this.tel,
              password:this.pass,
              code: this.code
          }))
          .then(res => {
            if(res.data.code==1){
              this.$messagebox.confirm('注册成功，现在就去登录','注册成功！',{confirmButtonText:'去登录',cancelButtonText:'先逛逛'})
              .then(() => {
                this.$router.push({ name: 'login' })
              }).catch(() => {
                    
              });
            }
            if(res.data.code == -2){
              this.$messagebox.confirm('该号码已被注册','出错啦！',{confirmButtonText:'确定',cancelButtonText:'取消'})
              .then(() => {
                
              }).catch(() => {
                    
              });
            }
          })
          .catch(error => {

          });
        }
    }
  },
  components:{
    
  },
  created(){
    
  },
  watch:{
          '$route' (to, from) {
                // this.getinfo()
               //   const toDepth = to.path.split('/').length
                // const fromDepth = from.path.split('/').length
                // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
                // console.log(to.name)
                if(to.name == 'reg'){
                  this.tel=''
                  this.pass=''
                  this.checkPass=''
                  this.code=''
                }
              }
        }
}
</script>

<style scoped lang="less">
.goreg{
  float: right;
  padding-top: .2rem;
  color: #333;
}
.login-head{
  width: 100%;
  height: .82rem;
  background: #fff;
  text-align: center;
  line-height: .82rem;
  font-size: .24rem;
  color: #333;
  border-top: .14rem solid #eceef3;
  border-bottom: 1px solid #d9dadc;
}
.box{
  padding: .2rem;
  height: auto;
  zoom:1;
  overflow: height; 
  .loginbtn{
    width: 100%;
    height: .7rem;
    margin-top: .4rem;
    text-align: center;
    line-height: .7rem;
    color: #fff;
    font-size: .24rem;
    background: #54b84c;
  }
  .item{
    width: 100%;
    height: .76rem;
    border-bottom: 1px solid #d2d2d2;
    line-height: .76rem;
    p{
      float: left;
      font-size: .24rem;
      color: #333333;
      width: 1.4rem;
      display: block;
      text-align: left;
    }
    input{
      display: block;
      float: left;
      width: 4rem;
      height: 0.76rem;
      border: none;
      outline: none;
      font-size: .24rem;
      box-sizing: border-box;
    }
    .code{
      width: 2rem;
    }
    .getcode{
      width: 2rem;
      float: right;
      height: .54rem;
      border: .01rem solid #bfbfbf;
      border-radius: 6px;
      font-size: .22rem;
      line-height: .54rem;
      margin-top: .1rem;
    }
  }
}
</style>
